<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>通知车主挪车</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="styles.css">
	<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <!-- 主容器 -->
    <div class="container">
        <h1>通知车主挪车</h1>
        
        <!-- 车辆信息展示 -->
        <div class="car-info-section">
            <img src="car-icon.svg" alt="汽车图标" class="car-icon">
            <div class="license-plate" id="licensePlate">豫Q·SA****</div>
            <div class="warm-tips">
                <p class="tip-text">不好意思阻碍到您的出行了</p>
                <p class="tip-text">您可留言通知我，我会立即前来挪车</p>
            </div>
        </div>
        
        <!-- 消息模板选择 -->
        <select id="messageTemplate" class="select-box">
            <!-- 选项将通过JavaScript动态加载 -->
        </select>

        <!-- 自定义消息输入框 -->
        <textarea 
            id="messageInput" 
            class="input-box-textarea" 
            placeholder="可留下联系方式，方便车主联系您！可留空，默认发送信息给车主尽快前来移车！"
        ></textarea>

        <!-- 紧急程度选择器 -->
        <div class="urgency-selector">
            <label>紧急程度：</label>
            <div class="urgency-options">
                <button class="urgency-btn active" data-urgency="urgent">紧急</button>
                <button class="urgency-btn" data-urgency="very-urgent">非常紧急</button>
            </div>
        </div>

        <!-- 通知按钮 -->
        <button id="notifyBtn" class="notify-btn">短信通知车主</button>

        <!-- 拨打电话滑块 -->
        <div id="callSlider" class="call-slider">
            <div class="call-text">向右滑动自动拨打电话</div>
            <div id="callHandle" class="call-handle"></div>
            <div id="callProgress" class="call-progress"></div>
        </div>

        <!-- 历史记录显示 -->
        <div class="history-toggle">
            <span>通知历史记录</span>
            <div class="history-controls">
                <span id="historyCount">0条记录</span>
                <button id="clearHistoryBtn" class="clear-history-btn">🗑️</button>
            </div>
        </div>

        <!-- 历史记录列表 -->
        <div id="historyList" class="history-list"></div>
    </div>

    <!-- 主题切换按钮组 -->
    <div class="theme-toggles">
        <button class="theme-btn active" id="themeToggleBtn">☀️</button>
    </div>

    <!-- Toast提示容器 -->
    <div id="toastContainer" class="toast-container">
        <div class="toast-content">
            <div class="toast-icon">
                <div class="toast-loading"></div>
            </div>
            <div class="toast-message"></div>
        </div>
    </div>

    <!-- 页脚信息 -->
    <footer class="footer">
        <div class="footer-content">
            <p class="footer-text">
                © <span id="current-year"></span> <a href="https://guzian.cn:810" target="_blank">顾子鞍</a> 版权所有 | 
                <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备20XXXXXX49号</a>
            </p>
            <script>document.getElementById('current-year').textContent = new Date().getFullYear();</script>
        </div>
    </footer>

    <!-- 引入JavaScript文件 -->
    <script src="config.js"></script>
    <script src="app.js"></script>
</body>
</html>